    Page({
        data: {
            // 文本框的数据模型
            input: '',
            // 任务清单数据模型
            todos: [
                { name: 'Learning WEAPP', completed: false },
                { name: 'Learning JavaScript', completed: true },
                { name: 'Learning HTML', completed: false }
            ],
            leftCount: 2,
            allCompleted: false
        },
        // 1：添加数据
        // 获取输入框数据
        inputHandler: function(e) {
            this.data.input = e.detail.value;
        },
        // 将输入的数据，通过+按钮，添加到item里面
        addTodosHandler: function(e) {
            // 小Tip1：当没有输入数据，禁止添加数据，
            // 小Tip2：当添加完数据，如果不置空输入框数据，永远都有数据
            // 小Tip3： 添加数据完成， 势必会多一条未完成数据，未完成数据对应+1到leftcontent里面
            if (!this.data.input) return;
            var todos = this.data.todos;
            todos.push({
                    name: this.data.input,
                    completed: false

                })
                // 小Tip3：由于新添加的，所以未完成数量直接+1。然后setData同步到视图层
            var leftCount = this.data.leftCount + 1
                // 将逻辑层的数据同步到是视图层
            this.setData({
                todos: todos,
                // 小Tip2
                input: '',
                leftCount: leftCount
            })

        },
        // 2：点击item，切换选中状态
        toggleTodoHandel: function(e) {
            // 要点tip1：切换**当前点中**的icon的图标
            // 要点tip2:改变todos里面的computed的状态
            // 要点Tip3：切换状态，改变剩余条目数量(根据item.computed的状态来决定是否+1)
            // tip1:
            // var item = e.currentTarget.dataset.index
            // 根据索引获取当前的item
            var item = this.data.todos[e.currentTarget.dataset.index]
                // 改变状态
            item.completed = !item.completed
                // 剩余条目
            var leftCount = this.data.leftCount + (item.completed ? -1 : 1)
                // 将状态同步到视图层: 注意此时点击以后，状态已经改变。只需要同步
            this.setData({
                todos: this.data.todos,
                leftCount: leftCount
                    // leftCount: this.data.leftCount,已经有leftcount，就不用再次this.data.
            })
        },
        // 3: 删除按钮，删除当前项，注意事件冒泡，所以catchtap
        // tip1:获取当前点击icon的索引
        // tip2：根据当前icon索引，获取当前item
        // tip3：进行删除操作 splice(当前索引,1),返回的是被删除的元素
        removeTodoHandel: function(e) {
            // tip1
            var todos = this.data.todos;
            // 这一步在下面赋值给了item，所以可以省略
            // todos.splice(e.currentTarget.dataset.index)[0]
            var item = todos.splice(e.currentTarget.dataset.index, 1)[0];
            // 判断被删除的元素的状态：这正是splice的妙处，返回被删除的元素
            var leftCount = this.data.leftCount + (item.completed ? 0 : -1)
            this.setData({
                todos: todos,
                leftCount: leftCount
            })
        },
        // 4：清除全部选择的
        clearHandel: function(e) {
            // tip1:判断是否为选中，选中就移除，
            // tip2:由于只是清除选中条目，剩余未完成条目不用管
            var todos = this.data.todos.filter(item => {
                return !item.completed
            })
            this.setData({
                todos: todos
            })
        },
        // 5：全选和全不选
        ToggleAllHandel: function(e) {
            this.data.allCompleted = !this.data.allCompleted;
            var todos = this.data.todos;
            todos.forEach(item => {
                item.completed = this.data.allCompleted;
                // return;
                // 默认返回foreach的结果，在todos里面循环，所以讲结果存在了todos里面
            });
            var leftCount = this.data.allCompleted ? 0 : this.data.todos.length
            this.setData({
                todos: todos, //将逻辑层todos数据同步到视图层
                leftCount: leftCount
            })
        }
    })